<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络拓扑分析 - 网络抓包分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/topology.css" rel="stylesheet">
    <!-- D3.js for network topology visualization -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <!-- Chart.js for minimal KPI chart -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-router"></i>
                网络抓包分析系统
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/">首页</a>
                <a class="nav-link" href="packets.html">数据包</a>
                <a class="nav-link" href="statistics.html">统计分析</a>
                <a class="nav-link" href="realtime.html">实时监控</a>
                <a class="nav-link active" href="topology.html">网络拓扑</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 控制面板 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-diagram-3"></i>
                            网络拓扑分析控制台
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label">分析时间范围</label>
                                <select id="timeRange" class="form-select">
                                    <option value="1">最近1小时</option>
                                    <option value="6">最近6小时</option>
                                    <option value="24" selected>最近24小时</option>
                                    <option value="168">最近7天</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">节点类型过滤</label>
                                <select id="nodeFilter" class="form-select">
                                    <option value="all">所有节点</option>
                                    <option value="internal">内部网络</option>
                                    <option value="external">外部网络</option>
                                    <option value="gateway">网关设备</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">流量阈值</label>
                                <select id="trafficThreshold" class="form-select">
                                    <option value="0">显示所有连接</option>
                                    <option value="100" selected>流量 > 100 packets</option>
                                    <option value="1000">流量 > 1000 packets</option>
                                    <option value="10000">流量 > 10000 packets</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">&nbsp;</label>
                                <div>
                                    <button id="refreshBtn" class="btn btn-primary me-2">
                                        <i class="bi bi-arrow-clockwise"></i> 刷新拓扑
                                    </button>
                                    <button id="autoRefreshBtn" class="btn btn-outline-secondary">
                                        <i class="bi bi-play-circle"></i> 自动刷新
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 拓扑图区域 -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-diagram-3"></i>
                            网络拓扑图
                            <span class="badge bg-secondary ms-2" id="nodeCount">节点: 0</span>
                            <span class="badge bg-info ms-1" id="linkCount">连接: 0</span>
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div id="topologyContainer" class="topology-container">
                            <!-- 拓扑图将通过D3.js动态生成 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 侧边信息面板 -->
            <div class="col-lg-4">
                <!-- 网络统计 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-graph-up"></i>
                            网络统计
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="stat-number" id="totalNodes">0</div>
                                <small class="text-muted">总节点数</small>
                            </div>
                            <div class="col-6">
                                <div class="stat-number" id="totalConnections">0</div>
                                <small class="text-muted">总连接数</small>
                            </div>
                        </div>
                        <hr>
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="stat-number text-success" id="internalNodes">0</div>
                                <small class="text-muted">内部节点</small>
                            </div>
                            <div class="col-4">
                                <div class="stat-number text-warning" id="externalNodes">0</div>
                                <small class="text-muted">外部节点</small>
                            </div>
                            <div class="col-4">
                                <div class="stat-number text-info" id="gatewayNodes">0</div>
                                <small class="text-muted">网关节点</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 节点分布（核心简化图表） -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-pie-chart"></i>
                            节点分布
                        </h6>
                    </div>
                    <div class="card-body">
                        <canvas id="nodeDistChart" height="180"></canvas>
                    </div>
                </div>

                <!-- 流量排行 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-trophy"></i>
                            流量排行 TOP 10
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="trafficRanking" class="traffic-ranking">
                            <!-- 流量排行将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 节点详情 -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-info-circle"></i>
                            节点详情
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="nodeDetails" class="node-details">
                            <p class="text-muted text-center">点击节点查看详情</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图例 -->
    <div class="topology-legend">
        <div class="legend-item">
            <div class="legend-node internal"></div>
            <span>内部网络</span>
        </div>
        <div class="legend-item">
            <div class="legend-node external"></div>
            <span>外部网络</span>
        </div>
        <div class="legend-item">
            <div class="legend-node gateway"></div>
            <span>网关设备</span>
        </div>
        <div class="legend-item">
            <div class="legend-node router"></div>
            <span>路由器</span>
        </div>
        <div class="legend-item">
            <div class="legend-node server"></div>
            <span>服务器</span>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/topology.js"></script>
</body>
</html>
